<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:b="http://bootsfaces.net/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	
	<ui:define name="custom_css">
		<link href="#{request.contextPath}/css/profile.css" rel="stylesheet" />
		<link href="#{request.contextPath}/css/eventprofile.css" rel="stylesheet" />
	</ui:define>

	<ui:define name="title">
        MeteoCal - #{userBean.name}
    </ui:define>

	<ui:define name="content">
		<div class="col-md-10 col-md-offset-1">
			<div class="col-md-4">
				<!-- Here goes the user info  -->
				<div class="row" align="center">
					<img class="profile-image img-circle" src="#{request.contextPath}#{userBean.avatar}" />
				</div>
	
				<br/>
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title" align="center">#{userBean.name}</h3>
					</div>
					<div class="panel-body">
						<table class="table table-user-information" id="display">
							<tbody>
								<tr>
									<td>Email</td>
									<td><a href="mailto:info@support.com">#{userBean.email}</a></td>
								</tr>
	
								<tr>
									<td>Password</td>
									<td>********</td>
								</tr>
								<tr>
									<td>Calendar</td>
									<td>#{userBean.visibilityCalendar}</td>
								</tr>
	
							</tbody>
						</table>
	
						<!-- <form>
							<table class="table table-user-information form-group hidden"
								id="edit">
								<tbody>
									<tr>
										<td>Email</td>
										<td>
											<input type="text" class="form-control" name="email" id="email" value="info@support.com" />
										</td>
									</tr>
	
									<tr>
										<td>Old Password</td>
										<td>
											<input type="password" class="form-control" name="email" id="email" />
										</td>
									</tr>
									<tr>
										<td>New Password</td>
										<td>
											<input type="password" class="form-control" name="email" id="email" />
										</td>
									</tr>
									<tr>
										<td>Confirm Password</td>
										<td>
											<input type="password" class="form-control" name="email" id="email" />
										</td>
									</tr>
									<tr>
										<td>Calendar</td>
										<td>
											<div class="btn-group" data-toggle="buttons" name="privacy">
												<label class="btn btn-default active">
													<input type="radio" name="options" id="option1" autocomplete="off" checked="checked"/>
													Private
												</label>
												<label class="btn btn-default">
													<input type="radio" name="options" id="option2" autocomplete="off" />
													Public
												</label>
											</div>
										</td>
									</tr>
	
								</tbody>
							</table>
						</form> -->
					</div>
				</div>
				<div align="center">
						
						<h:form id="visibilityform">
							<b:commandButton class="btn btn-lg btn-success" id="submit" value="Make my calendar #{userBean.inverseVisibilityCalendar}" action="#{userBean.changeVisibility()}" ajax="false" update="@all" />
						</h:form>
					<!-- <span class="btn btn-info btn-lg" id="buttonEdit">Edit</span>
					<span class="btn btn-warning btn-lg hidden" id="buttonCancel">Cancel</span>
					<span class="btn btn-success btn-lg hidden" id="buttonSave">Save</span> -->
				</div>
			</div>
			<div class="col-md-8">
				<!-- Here go the notifications and events -->
				<!-- Notifications -->
	
				<div id="noty-holder">
					<c:if test="#{userBean.notifsUnreadNumber > 0}">
						<div class="alert alert-info alert-dismissable page-alert">
							<button type="button" class="close">x<span class="sr-only">Close</span></button>
							<a href="#{request.contextPath}/user/notifs.xhtml">
								You have <h:outputText value="#{userBean.notifsUnreadNumber}" /> <c:if test="#{userBean.notifsUnreadNumber > 1}"> notifications</c:if><c:if test="#{userBean.notifsUnreadNumber == 1}"> notification</c:if> to read.
							</a>
						</div>
					</c:if>
				</div>
				
				<br /> <!-- events -->
				<div class="tabbable-panel">
					<div class="tabbable-line">
						<ul class="nav nav-tabs ">
							<li id="liNext" class="active">
								<a id="buttonNext" href="#next events" data-toggle="tab"> next events </a>
							</li>
							<li id="liMy">
								<a id="buttonMy" href="#myevents" data-toggle="tab"> my events </a>
							</li>
							<li id="liGoing">
								<a id="buttonGoing" href="#eventsgoing" data-toggle="tab"> events I'm going </a>
							</li>
							<span class="add-button">
								<a href="createevent.xhtml">create event <span class="glyphicon glyphicon-plus"></span></a>
							</span>
						</ul>
						<div class="tab-content">
							<div id="divNext" class="tab-pane active">
	
								<div class="row">
									<div class="col-xs-12 col-sm-8">
										<ul class="event-list">
											<ui:repeat value="#{userBean.nextEvents}" var="item">
												<li>
													<time>
														<span class="day"><h:outputText value="#{item.day}" /></span>
														<span class="month"><h:outputText value="#{item.monthString}" /></span>
														<span class="year"><h:outputText value="#{item.year}" /></span>
														<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
													</time>
													<div class="info">
														<h2 class="title">
															<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
														</h2>
														<p class="desc"><h:outputText value="#{item.description}" /></p>
														<br/>
														<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
														
														<c:if test="#{item.hasForecast}">
															<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
														</c:if>
													</div>
												</li>
											</ui:repeat>
										</ul>
									</div>
								</div>
	
							</div>
							<div id="divMy" class="tab-pane">
	
								<div class="row">
									<div class="col-xs-12 col-sm-8 ">
										<ul class="event-list">
											<ui:repeat value="#{userBean.myEvents}" var="item">
												<li>
													<time>
														<span class="day"><h:outputText value="#{item.day}" /></span>
														<span class="month"><h:outputText value="#{item.monthString}" /></span>
														<span class="year"><h:outputText value="#{item.year}" /></span>
														<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
													</time>
													<div class="info">
														<h2 class="title">
															<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
														</h2>
														<p class="desc"><h:outputText value="#{item.description}" /></p>
														<br/>
														<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
														
														<c:if test="#{item.hasForecast}">
															<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
														</c:if>
													</div>
												</li>
											</ui:repeat>
										</ul>
									</div>
								</div>
	
							</div>
							<div id="divGoing" class="tab-pane">
	
								<div class="row">
									<div class="[ col-xs-12 col-sm-8 ]">
										<ul class="event-list">
											<ui:repeat value="#{userBean.acceptedEvents}" var="item">
												<li>
													<time>
														<span class="day"><h:outputText value="#{item.day}" /></span>
														<span class="month"><h:outputText value="#{item.monthString}" /></span>
														<span class="year"><h:outputText value="#{item.year}" /></span>
														<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
													</time>
													<div class="info">
														<h2 class="title">
															<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
														</h2>
														<p class="desc"><h:outputText value="#{item.description}" /></p>
														<br/>
														<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
														
														<c:if test="#{item.hasForecast}">
															<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
														</c:if>
													</div>
												</li>
											</ui:repeat>
										</ul>
									</div>
								</div>
	
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	
	<ui:define name="custom_js">
		<script src="#{request.contextPath}/js/profiletab.js"></script>
	</ui:define>
</ui:composition>